<template>
  <el-dialog :model-value="visible" :append-to-body="true" :title="formModel.data.id ? '修改' : '添加'" :width="1000" center @close="cloneDialog">
    <el-form ref="ruleForm" :model="formModel.data" :rules="formModel.rules" class="demo-ruleForm" label-width="80px" @submit.prevent>
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题" prop="mingcheng">
            <el-input v-model="formModel.data.mingcheng" maxlength="100" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="简介" prop="jianjie">
            <el-input v-model="formModel.data.jianjie" type="textarea" rows="5" maxlength="500" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="网址" prop="wangzhi">
            <el-input v-model="formModel.data.wangzhi" maxlength="300" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="封面" prop="logo">
            <upload-image :image-url="formModel.data.logo" :height="270" :width="460" class="avatar" @success=" (val) => {   formModel.data.logo = val.url;  }"/>
          </el-form-item>
          <el-form-item label="专业" prop="zhuanye">
            <el-select v-model="formModel.data.zhuanye" filterable placeholder="请选择">
              <el-option v-for="item in zhuanyeOptions" :key="item.optionName" :label="item.optionName" :value="item.optionValue"/>
            </el-select>
          </el-form-item>
          <el-form-item label="课程类型" prop="kechengleixing">
            <el-select v-model="formModel.data.kechengleixing" filterable placeholder="请选择">
              <el-option v-for="item in kechengleixingOptions" :key="item.optionName" :label="item.optionName" :value="item.optionValue"/>
            </el-select>
          </el-form-item>
          <el-form-item label="浏览器" prop="liulanqi">
            <el-checkbox-group v-model="formModel.data.liulanqi">
              <el-checkbox v-for="item in browerEnums" :key="item.clazz" :label="item.clazz">
                <div class="browser-item" :class="item.clazz"></div>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="排序" prop="experimentSort">
            <el-input-number v-model="formModel.data.experimentSort"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="视频" prop="jianjieShipin">
            <div :style="'height: 270px; width: 400px;'">
              <video-upload :videoSrc="formModel.data.jianjieShipin" @success="uploadVedio"/>
            </div>
          </el-form-item>
          <el-form-item label="课程级别" prop="kechengjibie">
            <el-select v-model="formModel.data.kechengjibie" filterable placeholder="请选择">
              <el-option v-for="item in kechengjibieOptions" :key="item.optionName" :label="item.optionName" :value="item.optionValue"/>
            </el-select>
          </el-form-item>
          <el-form-item label="实验类型" prop="shiyanleixing">
            <el-select v-model="formModel.data.shiyanleixing" filterable placeholder="请选择">
              <el-option v-for="item in shiyanleixingOptions" :key="item.optionName" :label="item.optionName" :value="item.optionValue"/>
            </el-select>
          </el-form-item>
          <el-form-item label="支持热线" prop="rexian">
            <el-input v-model="formModel.data.rexian" maxlength="100" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="作者" prop="zuozheName">
          <el-input v-model="formModel.data.zuozheName" disabled style="width: 230px; margin-right: 20px"></el-input>
          <el-button plain type="primary" @click="lecturerSelect">选择作者</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="主要成员" prop="zuozhes1">
          <edit-tag :list="formModel.data.zuozhes1" @success="updateZuozhes1"></edit-tag>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="其它成员" prop="zuozhes1">
          <edit-tag :list="formModel.data.zuozhes2" @success="updateZuozhes2"></edit-tag>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="实验简介">
            <el-tabs style="width: 100%">
              <el-tab-pane label="实验教学目标" class="tabsHeight">
                <editor ref="editor" :value="formModel.data.mubiao" @input="value => formModel.data.mubiao = value"/>
              </el-tab-pane>
              <el-tab-pane label="实验原理" class="tabsHeight">
                <editor ref="editor" :value="formModel.data.yuanli" @input="value => formModel.data.yuanli = value"/>
              </el-tab-pane>
              <el-tab-pane label="实验教学过程与实验方法" class="tabsHeight">
                <editor ref="editor" :value="formModel.data.guocheng" @input="value => formModel.data.guocheng = value"/>
              </el-tab-pane>
              <el-tab-pane label="实验步骤" class="tabsHeight">
                <editor ref="editor" :value="formModel.data.buzhou" @input="value => formModel.data.buzhou = value"/>
              </el-tab-pane>
              <el-tab-pane label="实验结果与结论" class="tabsHeight">
                <editor ref="editor" :value="formModel.data.jieguo" @input="value => formModel.data.jieguo = value"/>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
          <el-form-item label="实验必读">
            <el-tabs style="width: 100%">
              <el-tab-pane label="网络要求" class="tabsHeight">
                <editor ref="editor" :value="formModel.data.wangluo" @input="value => formModel.data.wangluo = value"/>
              </el-tab-pane>
              <el-tab-pane label="硬件要求" class="tabsHeight">
                <editor ref="editor" :value="formModel.data.yingjian" @input="value => formModel.data.yingjian = value"/>
              </el-tab-pane>
              <el-tab-pane label="用户操作系统要求" class="tabsHeight">
                <editor ref="editor" :value="formModel.data.caozuoxitong" @input="value => formModel.data.caozuoxitong = value"/>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cloneDialog()">取消</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </span>
    </template>
    <select-lecturer v-if="lecturer.visible" :visible="lecturer.visible" :info="lecturer.info" @close="lecturerCallback"/>
  </el-dialog>
</template>

<script>
import {ElMessage} from 'element-plus';
import {defineComponent, getCurrentInstance, onMounted, reactive, ref, toRefs, watch} from 'vue';
import {useStore} from 'vuex';
import {experimentEdit, experimentSave, experimentView} from '@/api/experiment.js';
import {optionsList} from '@/api/options';
import editor from '@/components/Wangeditor/index.vue';
import UploadImage from '@/components/Upload/image.vue';
import SelectLecturer from '@/components/Selects/SelectLecturer.vue';
import VideoUpload from '@/components/Upload/VideoUpload.vue';
import EditTable from "@/components/EditTable.vue";
import EditTag from "@/components/EditTag.vue";
import {courseView} from "@/api/course";

export default defineComponent({
  components: {
    EditTable,EditTag,
    editor, UploadImage, VideoUpload, SelectLecturer
  },
  props: {
    modelValue: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    form: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  emits: ['update:modelValue', 'updateTable'],
  setup(props, {emit}) {
    const {proxy} = getCurrentInstance();
    const visible = ref(false);
    const ruleForm = ref(null);
    const loading = ref(false);

    let lecturer = reactive({
      visible: false,
      info: {}
    })

    let formModel = reactive({
      data: {},
      rules: {
        nickname: [{required: true, mingcheng: '请输入实验名称', trigger: 'blur'}]
      }
    });


    let {modelValue, form} = toRefs(props);
    if (modelValue.value) {
      visible.value = modelValue.value;
    }
    const state = reactive({
      putawayEnums: {},
      browerEnums: {},
      zhuanyeOptions: {},
      kechengjibieOptions: {},
      kechengleixingOptions: {},
      shiyanleixingOptions: {}
    });
    const store = useStore();
    onMounted(async () => {
      // 获取分类
      store.dispatch('GetOpts', {enumName: 'PutawayEnum'}).then((res) => {
        state.putawayEnums = res;
      });
      store.dispatch('GetOpts', {enumName: 'BrowerEnum'}).then((res) => {
        state.browerEnums = res;
      });
      state.zhuanyeOptions = await store.dispatch('GetOptions', {category: 'zhuanye'});
      state.kechengjibieOptions = await store.dispatch('GetOptions', {category: 'kechengjibie'});
      state.kechengleixingOptions = await store.dispatch('GetOptions', {category: 'kechengleixing'});
      state.shiyanleixingOptions = await store.dispatch('GetOptions', {category: 'shiyanleixing'});
    });
    // 弹窗是否要打开监控
    watch(modelValue, async(val) => {
      visible.value = val;
    });
    // form 数据监控
    watch(form, async(val) => {
      const _data = val.id? await experimentView(val.id) : val;
      formModel.data = {
        ..._data
      };

      if (formModel.data.zuozhes1) {
        formModel.data.zuozhes1 = JSON.parse(formModel.data.zuozhes1);
      }
      if (formModel.data.zuozhes2) {
        formModel.data.zuozhes2 = JSON.parse(formModel.data.zuozhes2);
      }

      if (formModel.data.liulanqi) {
        formModel.data.liulanqi = formModel.data.liulanqi.split(" ");
      }
    });

    const resetForm = () => {
      ruleForm['value'].resetFields();
      formModel.data = {};
    };

    const cloneDialog = () => {
      visible.value = false;
      emit('update:modelValue', false);
    };

    const onSubmit = () => {
      if (loading.value === true) {
        ElMessage({type: 'warning', message: '正在保存...'});
        return;
      }
      ruleForm['value'].validate(async(valid) => {
        if (valid) {
          loading.value = true;
          let d = null;
          const data = {
            ...formModel.data
          };

          if (data.zuozhes1) {
            data.zuozhes1 = JSON.stringify(data.zuozhes1);
          }
          if (data.zuozhes2) {
            data.zuozhes2 = JSON.stringify(data.zuozhes2);
          }

          if (data.id) {
            d = await experimentEdit(data);
          } else {
            d = await experimentSave(data);
          }
          if (d) {
            ElMessage({type: 'success', message: data.id ? '修改成功' : '保存成功'});
            emit('updateTable', d);
            cloneDialog();
          }
        }
        loading.value = false;
      });
    };

    const lecturerSelect = () => {
      lecturer.visible = true;
    }

    const lecturerCallback = (info) => {
      lecturer.visible = false
      if (info != null) {
        formModel.data.zuozheName = info.lecturerName;
        formModel.data.zuozheId = info.lecturerId;
      }
    }

    // 富文本改变
    const handleChangeIntro = (value) => {
      formModel.data.introduce = value
    }

    const uploadVedio = (fileInfo) => {
      formModel.data.jianjieShipin = fileInfo.url
    }
    const updateZuozhes1 = (data) => {
      formModel.data.zuozhes1 = data
      console.log('updateZuozhes1', data)
    }
    const updateZuozhes2 = (data) => {
      formModel.data.zuozhes2 = data
      console.log('updateZuozhes2', data)
    }

    return {
      ...toRefs(state),
      visible,
      loading,
      lecturer,
      formModel,
      ruleForm,
      cloneDialog,
      onSubmit,
      lecturerSelect,
      lecturerCallback,
      handleChangeIntro,
      uploadVedio,
      updateZuozhes1,
      updateZuozhes2
    };
  }
});
</script>
<style>
.tabsHeight {
  height: 350px
}
.browser-item {
  display: inline-block;
  margin-right: 24px;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.chrome {
  background-image: url("/src/assets/brower/details-chrome.png");
}
.ie {
  background-image: url("/src/assets/brower/details-ie.png");
}
.sll {
  background-image: url("/src/assets/brower/details-360.png");
}
.firefox {
  background-image: url("/src/assets/brower/details-firefox.png");
}
.el-checkbox {
  margin-right: 0;
}
</style>

